import React, { useState, useEffect } from 'react'
import { Breadcrumb, Button, Table } from "antd"
import { SearchOutlined, CloudUploadOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import style from './index.module.scss'



export default function LoanNumber() {
    const [echarts1, setMain] = useState('')
    const columns = [
        {
            title: '日期',
            dataIndex: 'data1',
        },
        {
            title: '委托放款',
            dataIndex: 'money_loan',
        },
        {
            title: '线下放款',
            dataIndex: 'downLine',
        },
    ];
    const dataSource = [
        {
            key: '1',
            data1: '2-26(一)',
            money_loan: '131',
            downLine:'131'
        },
        {
            key: '2',
            data1: '2-25(日)',
            money_loan: '222',
            downLine:'222'
        },
        {
            key: '3',
            data1: '2-25(日)',
            money_loan: '333',
            downLine:"333"
        },
    ];
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        // legend: {
        //     data: ['Evaporation', 'Precipitation', 'Temperature']
        // },
        xAxis: [
            {
                type: 'category',
                // boundaryGap: false,
                data: ['02-01', '02-04', '02-08', '02-12', '02-16', '02-20', '02-24', '02-28'],
                // axisPointer: {
                //     type: 'shadow'
                // }
            }
        ],
        yAxis: [
            {
                type: 'value',
            },
        ],
        series: [
            {
                type: 'bar',
                data: [23, 18, 7, 12, 7, 8, 3, 4]
            },
        ]
    };
    useEffect(() => {
        var node = document.getElementById('echarts1')
        setMain(node)
    }, [])
    // 基于准备好的dom，初始化echarts实例
    if (echarts1 !== "") {
        var myChart = echarts.init(echarts1);
        myChart.resize({ height: '400px' })
        myChart.setOption(option);
    }

    return (
        <div>
            <Breadcrumb style={{ margin: '16px 0', display: "flex", justifyContent: "start" }}>
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <Breadcrumb.Item>数据分析</Breadcrumb.Item>
                <Breadcrumb.Item>放款笔数</Breadcrumb.Item>
            </Breadcrumb>
            <div className={style.pre_title}>
                <p>放款成功的笔数</p>
                <Button className='button'><CloudUploadOutlined className="icon" />导出</Button>
            </div>
            <div id="echarts1"></div>
            <div className={style.pre_title}>
                <p>借款成功的总人数</p>
                <Button className='button'><CloudUploadOutlined className="icon" />导出</Button>
            </div>
            <Table dataSource={dataSource} columns={columns} pagination={false} />


        </div>
    )
}
